<script setup>
import { ref } from 'vue'

// 使用 ref 函数创建了一个响应式变量 awesome，并将其初始值设置为 true。ref 返回的是一个对象，实际的值存储在其 value 属性中。不过在 <script setup> 语法中，当在模板中使用 ref 创建的变量时，Vue 会自动解包，直接使用变量名即可访问其值
const awesome = ref(true)
</script>

<template>
  <!-- @ 是 v-on 指令的缩写，v-on 用于监听 DOM 事件。@click 表示监听按钮的点击事件。当按钮被点击时，会执行 @click 后面的表达式。 -->
  <!-- "awesome = !awesome"是一个 JavaScript 表达式，awesome 是一个在 Vue 组件的 <script> 部分定义的响应式变量（通常使用 ref 或 reactive 创建）。! 是逻辑非运算符，它会将 awesome 的当前布尔值取反。例如，如果 awesome 当前为 true，执行该表达式后它会变为 false；反之亦然。由于 awesome 是响应式的，其值的变化会触发 Vue 的响应式系统，从而更新依赖于 awesome 的 DOM 元素 -->
  <button @click="awesome = !awesome">toggle</button>

  <!-- v-if 是 Vue 的条件渲染指令，用于根据表达式的值来决定是否渲染某个元素。如果 awesome 的值为 true，则 Vue 会将这个 <h1> 元素渲染到页面上；如果 awesome 的值为 false，则这个 <h1> 元素不会出现在 DOM 中。 -->
  <h1 v-if="awesome">Vue is awesome!</h1>

  <!-- v-else 必须与 v-if 指令一起使用，它表示 v-if 条件不成立时要渲染的元素。也就是说，如果 awesome 的值为 false（即 v-if 条件不满足），则 Vue 会渲染这个 <h1> 元素；如果 awesome 的值为 true，则这个 <h1> 元素不会被渲染。 -->
  <h1 v-else>Oh no 😢</h1>
</template>